<template>
   <div class="flex" id="Pagination" :style="getPaginationStyle">

       <!-- 上一页 -->
       <el-button icon="el-icon-arrow-left" @click="changePage(PageInfo.pageNo - 1)"
                  :class="this.PageInfo.pageNo<=1?'disabled button':'button'" 
       
                  :disabled="this.PageInfo.pageNo<=1">
        </el-button>

       <!-- 首页 -->
       <el-button   class="button" v-if="this.star>1" @click="changePage(1)">1</el-button>
       <el-button   class="button point flex"   v-if="this.star>2">...</el-button>

       <el-button v-for="item in pageCount" :key="item" class="button"  :style="getStyle(item)"  @click="changePage(item)">{{item}} </el-button >

        <!-- 尾页 -->
        <el-button class="button point flex"  v-if="this.end < pageLength -1">...</el-button>
        <el-button   class="button" v-if="this.end < pageLength " @click="changePage(pageLength)">{{pageLength}}</el-button>
     
      <!-- 下一页 -->
      <el-button icon="el-icon-arrow-right"   @click="changePage(PageInfo.pageNo + 1)"
        :class="this.PageInfo.pageNo>=this.pageLength?'disabled button':'button'" 
        :disabled="this.PageInfo.pageNo>=this.pageLength">
      </el-button>
   </div>
</template>
<script>
  export default 
  {
     name :'', 
     props:['PageInfo','changePage','activeStyle'],
     data() {
        return {
            continue:3,
            star:0,
            end:2,
            pageLength:0,
        }
     },
     computed:{
        pageCount(){
             let array=[]
             for(let i=this.star;i<=this.end;i++)
                array.push(i)    
             return array
        },
         getPaginationStyle(){
            return this.activeStyle
        },
     },
     methods:{
        init(){
            let count =  (this.PageInfo.total / this.PageInfo.pageSize) % 1 == 0 ? 0 : 1
             count +=parseInt(this.PageInfo.total / this.PageInfo.pageSize )
             if(count ==0) count =1
             this.pageLength=count
        },
    
        getStyle(item){
            if(item == this.PageInfo.pageNo){
                let style = {background:'var(--activeBackColor)',color:'white',fontWeight: 600}
                return style
            }
         
        },
           getPages(){
            let star = this.PageInfo.pageNo - parseInt(this.continue / 2) 
            if(star<=0) star=1

            let end = this.PageInfo.pageNo + parseInt(this.continue / 2)
            if(end >= this.pageLength) end=this.pageLength

            this.star=star
            this.end=end

           

        },
     },
     watch:{
        PageInfo:{
            immediate:true,
            deep:true,
            handler(){
                this.init()
                this.getPages()
            }
        }
     }
  }
</script>
<style scoped lang='less'>

#Pagination{
    width: 100%;
    height: 50px;

    --activeBackColor:var(--GeneralBackColor);
}
.button{
   border-radius: 5px;
   padding: 5px;
   min-width: 30px;
   min-height: 30px;
   background: #ECF7FE;
   margin-top: 5px;
   color: black;
   border: none;
}
.button:hover{
    background: var(--activeBackColor);
    color: white;
    font-weight: 600;
}
.point{
  background: none;
}
.point:hover{
    background:none;
     color: black;
}
div .disabled:hover{
    background: #ECF7FE;
    color: black;
}
</style>